$base03:    #002b36;
$base02:    #073642;
$base01:    #586e75;
$base00:    #657b83;
$base0:     #839496;
$base1:     #93a1a1;
$base2:     #eee8d5;
$base3:     #fdf6e3;
$yellow:    #b58900;
$orange:    #cb4b16;
$red:       #dc322f;
$magenta:   #d33682;
$violet:    #6c71c4;
$blue:      #268bd2;
$cyan:      #2aa198;
$green:     #859900;
@mixin rebase($rebase03,$rebase02,$rebase01,$rebase00,$rebase0,$rebase1,$rebase2,$rebase3) 
{
    background-color:$rebase02;
    color:$rebase0;
    * { color:$rebase0; }
    h1,h2,h3,h4,h5,h6 { color:$rebase1; border-color: $rebase0; }
    a, a:active, a:visited { color: $rebase1; }
}
@mixin accentize($accent) {
    a, a:active, a:visited, code.url { color: $accent; }
    h1,h2,h3,h4,h5,h6 {color:$accent}
}
/* light is default mode, so pair with general html definition */
.light { @include rebase($base3,$base2,$base1,$base0,$base00,$base01,$base02,$base03)}
.dark  { @include rebase($base03,$base02,$base01,$base00,$base0,$base1,$base2,$base3)}
html * {
    color-profile: sRGB;
    rendering-intent: auto;
}

.bg-s-darker{
    background-color: $base03;
}

.bg-s-dark{
    background-color: $base02;
}

.btn-success{
    color: $base2;
    background-color: $green;
}
.btn-info{
    color: $base2;
    background-color: $blue;
}
.btn-warning{
    background-color: $orange;
}
.btn-danger{
    color: $base2;
    background-color: $red;
}
.btn-primary{
    background-color: $base02;
}

body{
    background-color: $base02;
}

#home{
    $main_border-color: $blue;

    section{
        background-color: $base02;
    }
    .navbar{
        border-bottom: $main_border-color 2px solid;
        .navbar-brand{
            color: $base2;
        }
        .navbar-brand:hover{
            color: $base3;
        }
        //.nav-item{
            //border-bottom: $main_border-color 1px solid;
        //}
    }

    #welcome-section{
        $w_height : 70vh;
        height: $w_height;
        background: url("../img/gb.jpeg") no-repeat;
        background-size: cover;
        background-position: center;
        background-attachment: fixed;

        .overlay{
            background-color: rgba(0,0,0,0.8);
            position: absolute;
            top:0;
            left:0;
            width: 100%;
            height: $w_height;
        }

        .container{
            padding-top: 20vh;
            opacity: 0.8;
        }

        .container:hover{
            opacity: 0.95;
        }
    }
}
